<template>
  <div class="localnav-wapper">
    <nav class="localnav">
      <div class="localnav-persistent">
        <div class="localnav-header">
          <a href="#" class="localnav-title">配件</a>
        </div>
        <div class="localnav-second">
          <label for="localnav-disclosure" class="">
            <span class="localnav-disclosure-button hide-outline" role="button">
              <span class="disclosure-text" @click="DisclosureText">
                浏览全部
              </span>
              <!-- 这里是放置图标 -->
              <span class="localnav-chevron" ref="GatClass"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="localnav-tray-wrapper" id="localnav-tray">
        <HideSbuNavGuide />
      </div>
    </nav>
    <div class="as-localnav-curtain" ref="HideDiv">

    </div>
    <div class='Hidefrist'>

    </div>
  </div>
</template>

<script>
import HideSbuNavGuide from "./Hidecontext/hideSbuNavGuide.vue";
export default {
  components: { HideSbuNavGuide },
  methods: {
    // 创建一个滑轮滚动的函数，方便后面监听
    Listener() {
      var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop > 0) {
        // 一旦滚轮滑动，就执行关闭小页面
        this.DisclosureText();
      }
    },
    //  创建一个初始函数
    BeforeHide() {
      // 获取滑轮的位置

      // 隐藏盒子
      var Hidecurtain = this.$refs["HideDiv"];
      var DisclosureText = this.$refs["GatClass"];
      var Hidelocalnav = document.getElementById("localnav-tray");
      if (DisclosureText.classList.contains("localnav-chevron")) {
        Hidelocalnav.style.display = "none";
        // 隐藏背景色
        Hidecurtain.style.display = "none";
      }
    },
    DisclosureText() {
      var Hidecurtain = this.$refs["HideDiv"];
      var DisclosureText = this.$refs["GatClass"];
      var Hidelocalnav = document.getElementById("localnav-tray");
      //  点击之后判断图标这个属性是否存在,进行样式的替换
      if (DisclosureText.classList.contains("localnav-chevron")) {
        DisclosureText.classList.remove("localnav-chevron");
        DisclosureText.classList.add("localnav-Second");
        Hidelocalnav.style.display = "block";
        // 点击之后将背景色展示
        Hidecurtain.style.display = "block";
        // 点击之后启动事件监听
      window.addEventListener("scroll", this.Listener);
      // 点击之后启动鼠标的点击事件监听
      window.addEventListener('click',this.getMousePos)
      } else if (DisclosureText.classList.contains("localnav-Second")) {
        DisclosureText.classList.remove("localnav-Second");
        DisclosureText.classList.add("localnav-chevron");
        //  点击按钮之后显示
        Hidelocalnav.style.display = "none";
        Hidecurtain.style.display = "none";
        // 进行移除监听事件
        window.removeEventListener("scroll", this.Listener)
        window.removeEventListener('click',this.getMousePos)
      }
      
    },
    getMousePos(){
      // 获取鼠标的点击位置,进而来调用函数
      var click = event || window.event;
      // return{'x': click.clientX,'y':click.clientY};
      var Ypos =click.clientY
      if (Ypos>490) {
        this.DisclosureText()
      }
    }
  },
  mounted() {
    // 页面元素加载完毕就会执行
    this.BeforeHide();
  },
};
</script>

<style lang="less" scoped>
.localnav-wapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  background-color: transparent;
  min-height: 0;
  margin: auto;
  .localnav {
    width: 100%;
    max-width: none;
    border-bottom: 0;
    background-color: #ffffff;
    display: flex;
    margin: 5px 0;
    justify-content: center;
    .localnav-persistent {
      z-index: 9997;
      margin: 0 auto;
      width: 1100px !important;
      height: 42px;
      //  width: auto;
      display: flex;
      justify-content: space-between;
      .localnav-header {
        position: relative;
        .localnav-title {
          position: absolute;
          // left: 30px;
          top: 10px;
          // padding: 10px 16px 6px 16px;
          height: 28px;
          width: 40px;
          font-size: 19px;
          line-height: 1;
          font-weight: 600;
          letter-spacing: 0.0075em;
          text-decoration: none;
          display: block;
          color: black;
          font-weight: 500;
        }
      }
      .localnav-second {
        width: 70px;
        line-height: 1.33337;
        position: relative;
        span {
          .disclosure-text {
            width: 70px;
            position: absolute;
            top: 12px;
            display: block;
            font-size: 10px;
            font-weight: 400;
            color: #909091;
            cursor: pointer;
            text-align: left;
          }
          .localnav-chevron::before {
            position: absolute;
            left: 55px;
            content: "";
            display: block;
            position: absolute;
            top: 20.5px;
            height: 1px;
            z-index: 1;
            background: #000;
            width: 5px;
            transform-origin: 100% 100%;
            transform: rotate(40deg) scaleY(1.1);
            right: 50%;
          }
          .localnav-chevron::after {
            position: absolute;
            left: 59px;
            content: "";
            display: block;
            position: absolute;
            top: 17px;
            height: 1px;
            z-index: 1;
            background: #000;
            width: 5px;
            transform-origin: 100% 100%;
            transform: rotate(-40deg) scaleY(1.1);
            right: 50%;
          }
          .localnav-Second::before {
            position: absolute;
            left: 56px;
            content: "";
            display: block;
            position: absolute;
            top: 17px;
            height: 1px;
            z-index: 1;
            background: #000;
            width: 5px;
            transform-origin: 100% 100%;
            transform: rotate(-40deg) scaleY(1.1);
            right: 50%;
          }
          .localnav-Second::after {
            position: absolute;
            left: 59px;
            content: "";
            display: block;
            position: absolute;
            top: 20.5px;
            height: 1px;
            z-index: 1;
            background: #000;
            width: 5px;
            transform-origin: 100% 100%;
            transform: rotate(40deg) scaleY(1.1);
            right: 50%;
          }
        }
        span:hover {
          span {
            color: rgb(12, 106, 205);
            font-weight: 500;
          }
        }
      }
    }
    .localnav-tray-wrapper {
      height: 446px;
      position: absolute;
      width: 100%;
      z-index: 9996;
    }
  }
  .as-localnav-curtain {
    // 给背景色进行定位
    position: absolute;
    width: 100%;
    height: 800px;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
  }

}
</style> 